<template>
	<div class="">
		<el-container>
			<el-aside width="200px"><el-tree :data="ModuleList" :props="defaultProps" @node-click="handleNodeClick"></el-tree></el-aside>
			<el-main>
				<el-form :model="editForm" :rules="editFormrules" ref="editFormRef" label-width="70px">
					<el-form-item>
						<el-button type="success" @click="add(editForm)">添加子节点</el-button>
						<el-button type="primary" @click="edit">设置父节点</el-button>
						<el-button type="danger" @click="del(editForm)">删除</el-button>
					</el-form-item>
					<el-form-item><span id="">功能模块信息维护</span></el-form-item>

					<el-form-item label="Id"><el-input :disabled="true" v-model="editForm.Id"></el-input></el-form-item>
					<el-form-item label="名字" prop="Name"><el-input v-model="editForm.Name"></el-input></el-form-item>

					<el-form-item label="父Id" prop="parentId"><el-input v-model="editForm.ParentId" :disabled="parentdisabled"></el-input></el-form-item>
					<el-form-item label="路径" prop="url"><el-input v-model="editForm.Path"></el-input></el-form-item>
					<el-form-item label="权重" prop="weight"><el-input v-model="editForm.Weight"></el-input></el-form-item>
					<el-form-item><el-button type="success" @click="editmodulesinfo(editForm)">保存</el-button></el-form-item>
				</el-form>
			</el-main>
		</el-container>
	</div>
</template>

<script>
export default {
	data() {
		return {
			defaultProps: {
				children: 'children',
				label: 'Name'
			},
			// 存放模块列表数据
			ModuleList: [],
		
			//编辑模块表单验证的验证规则对象
			editFormrules: {
				Name: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					},
					{
						min: 2,
						max: 10,
						message: '用户名的长度在2~10之间',
						trigger: 'blur'
					}
				]
			},
			//用户查询到的用户信息对象
			editForm: {
				Id: '',
				Name: '',
				Path: '',
				ParentId: '',
				Weight: '',

			},
			disabled:false,
			parentdisabled: true
		};
	},
	created() {
		this.getmoduleslist()
	},
	methods: {
		async getmoduleslist() {
			const data = await this.$http.get(
				'api/moudule/getmoudulelist'
				)
			console.log(data)

			this.ModuleList = data.data.data
		},
		//展示编辑模块对话框
		async handleNodeClick(modulesinfo) {
			console.log(modulesinfo);
			this.editForm=modulesinfo


		},
		//修改模块信息并提交
		async editmodulesinfo(formName) {
			
			if(formName.Id !==null && formName.Id!==""){
				//不等于0说明是编辑
				if(formName.Id!==0){
					this.$refs.editFormRef.validate(async valid => {
						if (!valid) return;
					const { data: res } = await this.$http.post('api/moudule/editmoudules', formName);
					if (res.code != 0) {
						this.$message.error(res.msg);
					}
					this.$message.success(res.msg);
					this.getmoduleslist();
					this.editForm={};
					})
				}else{
					
					this.$refs.editFormRef.validate(async valid => {
						if (!valid) return;
					const { data: res } = await this.$http.post('api/moudule/addmoudules', formName);
					if (res.code != 0) {
						this.$message.error(res.msg);
					}
					this.$message.success(res.msg);
					this.getmoduleslist();
					this.editForm={};
					
					})
				}
			
			}else{
			return	this.$message.warning("请先选择")
			}
		},
		add(editForm) {
			if(editForm.Id ==null || editForm.Id==""){
				return this.$message.warning("请先选择");
			}
			if(editForm.ParentId !==0){
				return this.$message.warning("只能给一级模块添加子模块");
			}else{
				this.editForm = {};
				this.disabled = false;
				this.parentdisabled = false;
				this.editForm.Id = 0;
				this.editForm.ParentId = editForm.Id
			}
			
			
		},
		edit() {
			if(this.editForm.Id ==null || this.editForm.Id==""){
				return this.$message.warning("请先选择");
			}
			this.parentdisabled = false
		},
	 async	del(editForm){
			if(this.editForm.Id ==null || this.editForm.Id==""){
				return this.$message.warning("请先选择");
			}
			const confirmResult = await this.$confirm('此操作将永久删除节点以及节点下的节点, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				//如果用户取消删除则 则打印cancel字符串
				.catch(err => err);
			//如果用户确认删除则confirmResult 为confim字符串
			
			if (confirmResult != 'confirm') {
				return this.$message.info('已经取消删除');
			}
			const { data: res } = await this.$http.post('api/moudule/delmoudules', 
				editForm
			);
			if (res.code != 0) {
				this.$message.error('删除失败' + res.msg);
			}
			this.$message.success('删除成功');
			this.getmoduleslist();
			window.location.reload('/Home')
			this.editForm={}
			
			
		}
	}
};
</script>

<style></style>
